<template>
  <div class="login-container"
       v-bind:class="[{'cal-backgound-size-width': !calBgImage },{'cal-backgound-size-height' : calBgImage }]">
    <div class="login-center">
      <div class="login-main">
        <img src="@/img/login/logo.svg" />
        <div class="main-title">
          <img src="@/img/login/main-title.svg" />
          <div class="input-area">
            <el-input class='input-circle'
                      placeholder="请输入账号"
                      required
                      v-model="userName"
                      @keyup.enter.native="userLogin">
              <img slot="prefix"
                   class="iip"
                   src="@/img/login/Shape.png" />
            </el-input>
            <el-input class='input-circle'
                      placeholder="请输入密码"
                      required
                      :type="passwordType"
                      v-model="password"
                      @keyup.enter.native="userLogin">
              <img slot="prefix"
                   class="iip"
                   src="@/img/login/Combined-shape.png" />
              <img v-if="!showPwd"
                   slot="suffix"
                   class="iis"
                   src="@/img/login/close.png"
                   @click="switchShow" />
              <img v-if="showPwd"
                   slot="suffix"
                   class="iis"
                   src="@/img/login/show.png"
                   @click="switchShow" />
            </el-input>
          </div>
          <div class="func-area">
            <span @click="remember"><img v-if="!rememberFlag"
                   src="@/img/login/Oval.png" />
              <img v-if="rememberFlag"
                   src="@/img/login/icon_select.png" />
              <span>记住账号</span>
            </span>
            <span style="left:152px">忘记密码?</span>
          </div>
          <el-row>
            <el-button type="primary"
                       style="width:330px"
                       @click="userLogin"
                       round>登录</el-button>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
.body-background {
  background: url('../../img/login/background_blue.png') no-repeat center fixed;
  background-size: cover;
}
.login-center {
  position: fixed;
  top: 50%;
  left: 50%;
  margin: -400px 0 0 -577px;
  width: 1154px;
  height: 800px;
  background: url('../../img/login/background_car.png') no-repeat;
  background-size: 100% 100%;
  & > .login-main {
    position: relative;
    top: 264px;
    left: 79px;
    & > .main-title {
      position: absolute;
      margin-top: 22px;
      & > .input-area {
        width: 330px;
        margin-top: 17px;
      }
      & > .func-area {
        padding: 0 10px;
        margin-top: 15px;
        margin-bottom: 20px;
        & > span,
        & > span span {
          position: relative;
          cursor: pointer;
          top: 2px;
          font-family: PingFangHK-Regular;
          font-size: 14px;
          color: #999999;
          letter-spacing: 1.23px;
        }
      }
    }
  }
}
.input-circle > .el-input__inner {
  margin-top: 20px;
  border-radius: 78px;
  background-color: #f0f4fa;
}
.iip {
  margin-top: 20px;
  padding-top: 11px;
  padding-left: 5px;
}
.iis {
  margin-top: 20px;
  padding-right: 8px;
  padding-top: 18px;
}
</style>

<script>
import { mapGetters } from 'vuex'
import { validatenull } from '@/utils/validate'
import { api } from '@/api'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'

export default {
  beforeCreate() {
    document.getElementsByTagName('body')[0].className = 'body-background'
  },
  beforeDestroy() {
    document.getElementsByTagName('body')[0].className = 'gray-bg'
  },
  data() {
    return {
      calBgImage: (document.body.clientWidth / document.body.clientHeight) > 1.92,
      userName: this.account || null, // 用户名
      password: null, // 密码
      showPwd: false,
      passwordType: 'password',
      rememberFlag: false
    }
  },
  computed: {
    ...mapGetters([
      'account'
    ])
  },
  created() {
  },
  mounted() {
    this.calBgImage = (document.body.clientWidth / document.body.clientHeight) > 1.92
    const that = this
    window.onresize = function temp() {
      that.calBgImage = (document.body.clientWidth / document.body.clientHeight) > 1.92
    }
  },
  methods: {
    switchShow() {
      this.showPwd = !this.showPwd
      this.passwordType === ''
        ? (this.passwordType = 'password')
        : (this.passwordType = '')
    },
    remember() {
      this.rememberFlag = !this.rememberFlag
    },
    async userLogin() {
      if (validatenull(this.userName)) {
        this.$msg._message('用户名不能为空', 'warning')
        return
      }
      if (validatenull(this.password)) {
        this.$msg._message('密码不能为空', 'warning')
        return
      }
      if (this.rememberFlag) {
        this.$store.dispatch('Remember', this.userName)
      }
      const user = {
        userName: this.userName,
        password: this.password
      }
      const res = await this.$http.post(api.SYS_LOGIN, user)
      console.log(res)
      if (res.code === HTTPSUCCESS) {
        this.$store.dispatch('Login', res.data).then(res => {
          this.$router.push({ path: '/dashboard' })
        })
      } else {
        this.$msg._message(res.msg, 'error')
      }
    }
  }
}
</script>
